﻿@using App.MVC.App_Start

@{
    ViewBag.Title = "KaoHeFanWeiSetting";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Template/ace_admin_v1.4.0/assets/js/src/ace.searchbox-autocomplete.js"></script>
<div class="row" id="app">
    <div class="col-xs-12">
        <div class="row" id="list">
            <div class="col-xs-12">
                <p>
                    <button class="btn btn-white btn-info btn-bold" v-on:click="p_chuangj()">
                        <i class="ace-icon glyphicon glyphicon-plus bigger-120 blue"></i>
                        新增
                    </button>
                </p>
                <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="center">
                                姓名
                            </th>
                            <th>考核范围</th>
                            <th>被考核人员</th>
                            <th></th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="tr in kaohefanweilist">
                            <td class="center">
                                {{tr.xingming}}
                            </td>
                            <td>{{tr.NeiRongsstr}}</td>
                            <td>{{tr.BeiKaoHeRenYuansstr}}</td>
                            <td>

                                <div class="btn-group">
                                    <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle btn-sm">
                                        操作
                                        <i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                    </button>

                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="javascript:void(0)" v-on:click="getKaoHeFanWeiInfo(tr.khfwryid)">编辑</a>
                                        </li>

                                        <li>
                                            <a href="javascript:void(0)" v-on:click="delKaoHeFanWei(tr.khfwryid)">删除</a>
                                        </li>
                                    </ul>
                                </div><!-- /.btn-group -->
                            </td>

                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="row" id="info" style="display: none">
            <div class="col-xs-12">
                <h2>{{_self.kaohefanwei.xingming}} <button class="button default" v-on:click="showlist()">返回列表</button></h2>
                <h3>考核范围</h3>
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="center">
                                考核项目
                            </th>
                            <th><button class="btn btn-minier btn-yellow" v-on:click="addKaoHeXiangMu()">添加考核项目</button></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="tr in _self.kaohefanwei.NeiRongs">
                            <td class="center">
                                {{tr.nr}}
                            </td>
                            <td>

                                <div class="btn-group">
                                    <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle btn-sm">
                                        操作
                                        <i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="javascript:void(0)" v-on:click="delkaohexiangmu(tr.nrid)">删除</a>
                                        </li>
                                    </ul>
                                </div><!-- /.btn-group -->
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h3>被考核人</h3>
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="center">
                                被考核人姓名
                            </th>
                            <th><button class="btn btn-minier btn-yellow" v-on:click="addbeikaoheren()">添加被考核人</button> 考核所在科室</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="tr in kaohefanwei.BeiKaoHeRenYuans">
                            <td class="center">
                                {{tr.XingMing}}
                            </td>
                            <td>

                                <div class="btn-group">
                                    <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle btn-sm">
                                        操作
                                        <i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="javascript:void(0)" v-on:click="delbeikaoherenyuan(tr.userinfoId)">删除</a>
                                        </li>
                                    </ul>
                                </div><!-- /.btn-group -->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--添加模板-->
        <div id="dialog-confirm" class="hide">
            <form class="form-horizontal" role="form">
                <!-- #section:elements.form -->
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="tags"> 教师姓名 </label>

                    <div class="col-sm-9">
                        <input type="text" id="tags" placeholder="教师姓名" class="col-xs-12" />
                    </div>
                </div>
                <div class="space-24"></div>
            </form>
        </div><!-- #添加模板 -->
        <!--考核范围-->
        <div id="kaohefanwei" class="hide">
            <table class="table table-striped table-bordered table-hover" id="moban">
                <thead>
                    <tr>
                        <th class="center">
                            模板名称
                        </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="tr in mobanlist">
                        <td class="center">
                            {{tr.mbmc}}
                        </td>
                        <td>

                            <div class="btn-group">
                                <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle btn-sm">
                                    操作
                                    <i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="javascript:void(0)" v-on:click="showmobaninfo(tr)">查看</a>
                                    </li>
                                </ul>
                            </div><!-- /.btn-group -->
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="row">
                <div class="col-xs-12">
                    <h2>{{mobaninfo.mbmc}}</h2>
                    <table class="table table-striped table-bordered table-hover" id="lj">
                        <thead>
                            <tr>
                                <th class="center">
                                    项目名称
                                </th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="tr in mobaninfo.MoBan_Paths">
                                <td class="center">
                                    {{tr.ljmc}}
                                </td>
                                <td>

                                    <div class="btn-group">
                                        <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle btn-sm">
                                            操作
                                            <i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="javascript:void(0)" v-on:click="selectkaohexiangmu(tr.ljid)">选择</a>
                                            </li>
                                        </ul>
                                    </div><!-- /.btn-group -->
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div><!-- #考核范围 -->
        <!--被考核人-->
        <div id="beikaoheren" class="hide">
            <table class="table table-striped table-bordered table-hover" id="renyuan">
                <thead>
                    <tr>
                        <th class="center">
                            教师姓名
                        </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="tr in availableTags">
                        <td class="center">
                            {{tr.label}}
                        </td>
                        <td>

                            <div class="btn-group">
                                <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle btn-sm">
                                    操作
                                    <i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="javascript:void(0)" v-on:click="selectbeikaoherenyuan(tr.id)">选择</a>
                                    </li>
                                </ul>
                            </div><!-- /.btn-group -->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div><!-- #被考核人 -->
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            availableTags: [],
            kaohefanweilist: [],
            userinfoid: "",
            kaohefanwei: {},
            mobanlist: [],
            mobaninfo:{}
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.getJiaoZhiGong();
                this.getKaoHeFanWeis();
            },
            p_chuangj() {
                var _self = this;
                $("#dialog-confirm").removeClass('hide').dialog({
                    resizable: false,
                    width: '500',
                    modal: true,
                    title: "创建考核范围",
                    title_html: true,
                    buttons: [
                        {
                            html: "<i class='ace-icon glyphicon glyphicon-ok bigger-110'></i>&nbsp; 保存",
                            "class": "btn btn-success btn-minier",
                            click: function () {
                                _self.createKaoHeFanWei();
                                $(this).dialog("close");
                            }
                        },
                        {
                            html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 取消",
                            "class": "btn btn-minier",
                            click: function () {
                                $(this).dialog("close");
                            }
                        }
                    ]
                });
            },
            getJiaoZhiGong() {
                var _self = this;
                axios.post('@Url.Action("GetJiaoZhiGongs", "MoBanConfig")').then(
                        (response) => {
                            _self.availableTags = [];
                            $(response.data).each(function (i, item) {
                                _self.availableTags.push({ label: item.XingMing + ":" + item.keshi.ksmc + ":" + item.username, value: item.XingMing + ":" + item.keshi.ksmc + ":" + item.username, id: item.userinfoId });
                            });
                            //autocomplete
                            $("#tags").autocomplete({
                                source: _self.availableTags,
                                select: function (event, ui) {
                                    _self.userinfoid = ui.item.id;
                                    console.log(ui.item.id);
                                }
                            });

                        },
                        (response) => {

                        }
                    )
                    .catch(
                        function(error) {
                            bootbox.alert(error);
                            //alert(error);
                        }
                    );
            },
            getKaoHeFanWeis() {
                var _self = this;
                axios.get("@Url.Action("GetKaoHeFanWeis", "MoBanConfig")").then((response) => {
                    _self.kaohefanweilist = [];
                    for (var i = 0; i < response.data.length; i++) {
                            _self.kaohefanweilist.push(response.data[i]);
                    }
                    debugger;
                    },
                    (response) => {

                    }
                ).catch(function(response) {
                    console.log(response);
                });
            },
            createKaoHeFanWei() {
                var _self = this;
                axios.get("@Url.Action("CreateKaoHeFanWei", "MoBanConfig")", { params: { userinfoid: _self.userinfoid } }).then((response) => {
                        _self.getKaoHeFanWeis();
                    },
                    (response) => {

                    }
                ).catch(function(response) {
                    console.log(response);
                });
            },
            delKaoHeFanWei(khfwid) {
                var _self = this;
                bootbox.confirm("你确定这个操作吗?",
                    function(result) {
                        if (result) {
                            axios.get("@Url.Action("DelKaoHeFanWei", "MoBanConfig")", { params: { khfwid: khfwid } }).then((response) => {
                        _self.getKaoHeFanWeis();
                    },
                    (response) => {

                    }).catch(function(response) {
                    console.log(response);
                });
                        }
                    });
            },
            getKaoHeFanWeiInfo(khfwid) {
                var _self = this;
                axios.get("@Url.Action("GetKaoHeFanWeiInfo", "MoBanConfig")", { params: { khfwid: khfwid } }).then((response) => {
                    _self.kaohefanwei = response.data;
                    $("#info").show($("#list").hide());
                    },
                    (response) => {

                    }
                ).catch(function(response) {
                    console.log(response);
                });
            },
            addKaoHeXiangMu() {
                var _self = this;
                _self.getMoBanList();
                $("#kaohefanwei").removeClass('hide').dialog({
                    resizable: false,
                    width: '500',
                    modal: true,
                    title: "选择考核范围",
                    title_html: true,
                    buttons: []
                });
            },
            getMoBanList() {
                var _self = this;
                $.showloading();
                axios.post('@Url.Action("GetMoBanList", "MoBanConfig")').then(
                        function (response) {
                            _self.mobanlist = [];
                            for (var i = 0; i < response.data.length; i++) {
                                _self.mobanlist.push(response.data[i]);
                            }
                            $.closeloading();
                        },
                        function(response) {
                            //alert(response.status);
                        }
                    )
                    .catch(
                        function(error) {
                            //alert(error);
                        }
                    );
            },
            showmobaninfo(obj) {
                debugger;
                var _self = this;
                _self.mobaninfo = obj;
            },
            selectkaohexiangmu(ljid) {
                var _self = this;
                axios.get("@Url.Action("SelectKaoHeXiangMu", "MoBanConfig")", { params: { khfwryid: _self.kaohefanwei.khfwryid, ljid: ljid } }).then((response) => {
                        bootbox.alert("成功",
                            function () {
                                _self.getKaoHeFanWeiInfo(_self.kaohefanwei.khfwryid);
                            });
                    },
                    (response) => {

                    }
                ).catch(function(response) {
                    console.log(response);
                });
            },
            delkaohexiangmu(nrid) {
                var _self = this;
                bootbox.confirm("你确定这个操作吗?",
                    function(result) {
                        if (result) {
                            axios.get("@Url.Action("DelKaoHeXiangMu", "MoBanConfig")", { params: { khfwryid: _self.kaohefanwei.khfwryid, nrid: nrid } }).then((response) => {
                                    bootbox.alert("成功",
                                        function () {
                                            _self.getKaoHeFanWeiInfo(_self.kaohefanwei.khfwryid);
                                        });
                                },
                                (response) => {

                                }
                            ).catch(function(response) {
                                console.log(response);
                            });
                        }
                    });
            },
            addbeikaoheren() {
                var _self = this;
                _self.getMoBanList();
                $("#beikaoheren").removeClass('hide').dialog({
                    resizable: false,
                    width: '500',
                    modal: true,
                    title: "选择被考核人",
                    title_html: true,
                    buttons: []
                });
            },
            selectbeikaoherenyuan(userid) {
                var _self = this;
                axios.get("@Url.Action("SelectBeiKaoHeRenYuan", "MoBanConfig")", { params: { khfwryid: _self.kaohefanwei.khfwryid, userid: userid } }).then((response) => {
                        bootbox.alert("成功",
                            function () {
                                _self.getKaoHeFanWeiInfo(_self.kaohefanwei.khfwryid);
                            });
                    },
                    (response) => {

                    }
                ).catch(function(response) {
                    console.log(response);
                });
            },
            delbeikaoherenyuan(userid) {
                var _self = this;
                bootbox.confirm("你确定这个操作吗?",
                    function(result) {
                        if (result) {
                            axios.get("@Url.Action("DelBeiKaoHeRenYuan", "MoBanConfig")", { params: { khfwryid: _self.kaohefanwei.khfwryid, userid: userid } }).then((response) => {
                                    bootbox.alert("成功",
                                        function () {
                                            _self.getKaoHeFanWeiInfo(_self.kaohefanwei.khfwryid);
                                        });
                                },
                                (response) => {

                                }
                            ).catch(function(response) {
                                console.log(response);
                            });
                        }
                    });
            },
            showlist() {
                $("#list").show($("#info").hide());
                this.getKaoHeFanWeis();
            }
        }
    });
</script>